<template>
  <div class="app-container">
    <wrong-display :list="list" />
    <page :current="current" :size="size" :total="total" @handle="handlePage" />
  </div>
</template>

<script>
import WrongDisplay from '@/views/components/WrongDisplay'
import Page from '@/views/components/Page'
import { page } from '@/api/wrong'

export default {
  name: 'Wrong',
  components: { WrongDisplay, Page },
  data() {
    return {
      current: 1,
      size: 10,
      total: 0,
      list: []
    }
  },
  created() {
    this.handlePage(this.current)
  },
  methods: {
    handlePage(current, classify) {
      page({ current, size: this.size, params: { classify }}).then(response => {
        const { data } = response
        this.total = data.total
        this.list = data.records
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
